<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/cart.css">
</head>
<body>
  <h1>我是一个购物车页面</h1>

  <div class="container"></div>

  <script src="../tools/jquery.min.js"></script>
  <script>
    // 调用函数,动态生成页面
    setPage();

    // 事件委托 点击点击效果
    $('.container').click(function(e){
      // 获取 localStorage 中 存储的数据
      let cart = JSON.parse( window.localStorage.getItem('cart') );

      // 点击全选按钮效果
      if( e.target.getAttribute('name') === 'all' ){
        //  给 数组数据 中 buy属性 设定属性值 
        //  和 全选按钮数据相同
        //  循环遍历数组 设定 每一个数据单元 buy属性
        cart.forEach(item=>{
          item.buy = $(e.target).prop('checked') ;
        })
      
      // 点击的是其他input标签的 复选框
      }else if( e.target.getAttribute('name') === 'other' ){
        // 给 响应的数据 设定 buy属性
        // 循环遍历 数组
        for( var i = 0 ; i <= cart.length-1 ; i++ ){
          // 如果点击标签的goods_id 和 存储商品的goods_id 相同
          // 设定 存储商品,buy属性的属性值
          // 注意数据类型都是字符串类型
          if( cart[i].goods_id === e.target.getAttribute('goods_id') ){
            cart[i].buy = $(e.target).prop('checked');
          }
        }

      // 点击的是 我不要了 按钮 
      }else if( e.target.getAttribute('name') === 'del' ){
        // 给 响应的数据 删除 数据单元
        // 循环遍历 数组
        for( var i = 0 ; i <= cart.length-1 ; i++ ){
          // 如果点击标签的goods_id 和 存储商品的goods_id 相同
          // 删除 当前 索引下标对应的数组单元
          if( cart[i].goods_id === e.target.getAttribute('goods_id') ){
            // 删除数组单元
            cart.splice( i , 1 );
          }
        }
      
      // 点击的是 - 按钮 
      }else if( e.target.getAttribute('name') === '-' ){
        // 给 响应的数据 num属性 减1 不能小于1
        // 循环遍历 数组
        for( var i = 0 ; i <= cart.length-1 ; i++ ){
          // 如果点击标签的goods_id 和 存储商品的goods_id 相同
          // 删除 当前 索引下标对应的数组单元
          if( cart[i].goods_id === e.target.getAttribute('goods_id') ){
            // num属性值 -1
            cart[i].num = cart[i].num -0 -1 ;
          }
        }
      
      // 点击的是 + 按钮 
      }else if( e.target.getAttribute('name') === '+' ){
        // 给 响应的数据 num属性 加1 不能大于库存
        // 循环遍历 数组
        for( var i = 0 ; i <= cart.length-1 ; i++ ){
          // 如果点击标签的goods_id 和 存储商品的goods_id 相同
          // 删除 当前 索引下标对应的数组单元
          if( cart[i].goods_id === e.target.getAttribute('goods_id') ){
            // num属性值 +1
            cart[i].num = cart[i].num -0 +1 ;
          }
        }
      }
      
      // 将 新的数组 设定给 localStorage 中的 cart
      window.localStorage.setItem( 'cart' , JSON.stringify( cart ) );

      // 根据新的 localStorage 再次 动态渲染生成页面
      setPage();
    })


    
    // 生成页面函数
    function setPage(){
      // 1, 获取 localStorage 中的数据
      let cart = window.localStorage.getItem('cart');

      if( cart === null ){
        $('.container').html('<h1>您的购物车是空车,请您添加购买商品</h1>');

      }else{
        cart = JSON.parse( cart );

        if( cart.length === 0 ){
          $('.container').html('<h1>您的购物车是空车,请您添加购买商品</h1>');
        }else{
          // 动态生成页面
          
          // 先定义变量 存储 结果
          let bool = true;
          let type = 0; // 商品种类
          let row = 0 ; // 商品数量
          let money = 0 ; // 商品总价

          // 第一部分内容 li标签之前的内容
          let str = `      
          <div class="panel panel-info ">
            <div class="panel-body bg-info">
              <div class="checkbox">
                <label>
                  <input name="all"  type="checkbox" value="">
                  全选
                </label>
              </div>
            </div>
            <div class="panel-footer">
              <ul class="cart-list">`;

          // 第二部分内容 li标签 是 格局数据动态生成的
          // item是存储数据的对象
          cart.forEach(item=>{
            // 如果 buy属性 有 false 给 bool变量赋值 false
            if( item.buy === false ){
              bool = false;
            }else{
              // 有一个商品选中 累加 商品种类 件数 价格
              // 种类 累加 1
              type += 1;
              // 件数 累加 num属性值
              row += item.num - 0 ;
              // 总价 累加 件数*单价
              money += (item.num-0) * (item.goods_price-0);
            }

            str += `
              <li class="cart-item">
                <div class="left">
                  <input name="other" goods_id="${item.goods_id}" type="checkbox" ${item.buy ? 'checked' : ''}>
                </div>
                <div class="right">
                  <div class="media">
                    <div class="media-left">
                      <a href="#">
                        <img class="media-object" src="${item.goods_small_logo}" alt="...">
                      </a>
                    </div>
                    <div class="media-body">
                      <h4 class="media-heading">${item.goods_name}</h4>
                      <p>
                        <i class="glyphicon glyphicon-yen"></i>
                        <span>${item.goods_price}</span>
                      </p>
                      <div class="btn-group pull-right" role="group" aria-label="...">
                        <button name="-" goods_id="${item.goods_id}" type="button" class="btn btn-default" ${item.num-0 === 1 ? 'disabled' : ''}>-</button>          
                        <button type="button" class="btn btn-default" disabled>${item.num}</button>
                        <button name="+" goods_id="${item.goods_id}" type="button" class="btn btn-default"  ${item.num-0 === item.goods_number - 0 ? 'disabled' : ''}>+</button>
                      </div>
                      <button name="del" goods_id="${item.goods_id}" class="del btn btn-danger">我不要了</button>

                    </div>
                  </div>
                </div>
              </li>
            `
          })

          // 第三部分内容 li标签 之后的内容
          str += `
            </ul>
            </div>
          </div>
          <div>
            <h1>您一共买了${type}种商品</h1>
            <h1>您一共买了${row}件商品</h1>
            <h1>您一共需要支付${money.toFixed(2)}元</h1>
          </div>
          
          `;

          // 将字符串 最终写入标签
          $('.container').html(str);

          // 设定全选input标签 checked属性
          $('[name="all"]').prop( 'checked' , bool );
        }
      }
    }

  </script>

  <script>
    /*
      1,  获取 localStorage 中 数据数值
        情况1 localStorage 中 cart 结果 是 null
          购物车是空内容 写入 对应的空页面内容

        情况2 localStorage 中 cart 结果 是 空数组
          购物车是没有数据的 写入 对应的空页面内容

        情况3 localStorage 中 cart 结果 不是 空数组
          动态生成 对应的页面

          li标签之前 是固定的内容
          li标签是根据数据 动态生成的
          li标签之后的内容 是固定内容
    
    
    */
  </script>
</body>
</html>
